<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Your Lyrics</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>

	<style type="text/css">
		a:link {color: #fff}		/* 未访问的链接 */
		a:visited {color: #fff}	/* 已访问的链接 */
		a:hover {color: #000}	/* 鼠标移动到链接上 */
		a:active {color: #fff}	/* 选定的链接 */
		.shou{
			font-size: 20px;
		}
		.vcenter {
			position:absolute;
			left:30%;
			top:40%;
			translateX(-50%);
			translateY(-50%);
			color: white;
			font-size: 30px;
			font-weight: bold;

		}


	</style>
</head>
<body >

	<!-- -------------------- 导航条 ---------------------------- -->
	<header >
		<nav class="navbar navbar-fixed-top transparent">
	      <div class="container">
	        <div class="navbar-header">
	          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
	            <span class="sr-only">Toggle navigation</span>
	            <span class="icon-bar"></span>
	            <span class="icon-bar"></span>
	            <span class="icon-bar"></span>
				
	          </button>
	          <a class="navbar-brand desktop" href="index.html">
            	<img src="img/icon.png" alert="icon" width="40px" height="40px">
         	  </a>
	        </div>
	        <div id="navbar" class="navbar-collapse collapse">
	          
	          <div >
	          	<ul  class="nav navbar-nav navbar-right pull-left">
	          		<li ><a class="shou" href="index.html">首页</a></li>
					<li ><a class="shou" href="share.html">歌词分享</a></li>
					<li ><a class="shou" href="music.html">音乐欣赏</a></li>
					<li ><a class="shou" href="http://zzesxiao.leanote.com">关于我们</a></li>
				</ul>

			</div>                    
			<div >
	            <ul class="nav navbar-nav navbar-right pull-right">
	              <li><a class="shou" href="#" data-toggle="modal" data-target="#zc">注册</a></li>
	              <li><a  data-toggle="modal" data-target="#login" class="shou" href="#">登录</a></li>
	             
	            </ul>
	          </div>
	        </div><!--/.nav-collapse -->
	      </div>
	    </nav>
	</header>

	<!-- 登录弹出框 -->
	<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	    <form action="" >
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" id="myModalLabel">用户名：<input name="username" type="text"></h4>
		        <br>    
		        <h4 class="modal-title" id="myModalLabel">&nbsp;&nbsp;&nbsp;密码：<input type="password" name="password"></h4>
		      </div>
		      <div class="modal-footer">
		      	<button type="submit" class="btn btn-primary">登录</button>
		        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		      </div>
	    </form>
	    </div>
	  </div>
	</div>

	<!-- 注册弹出框 -->
	<div class="modal fade" id="zc" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	    <form action="" >
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" id="myModalLabel">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用户名：<input name="username" type="text"></h4>
		        <br>    
		        <h4 class="modal-title" id="myModalLabel">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;密码：<input type="password" name="password"></h4>
		        <br>    
		        <h4 class="modal-title" id="myModalLabel">再次输入密码：<input type="password" name="password"></h4>

		      </div>
		      <div class="modal-footer">
		      	<button type="submit" class="btn btn-primary">注册</button>
		        <button type="button" class="btn btn-default"  data-dismiss="modal">关闭</button>
		      </div>
	    </form>
	    </div>
	  </div>
	</div>
	<!-- -------------------- 导航条 END ---------------------------- -->


	<!-- -------------- 幕头图片 ---------------------------- -->
	<section id="welcome" class="jumbotron">
		<div class="container " >
			<br><br>
			<h1><strong>歌词 </strong>一首歌的灵魂</h1>
			<p>让我们共同分享，那些让你 <em>感触很深</em> 的歌词
		</div>
	</section>
	<!-- -------------- 幕头图片 END ---------------------------- -->
	
	<!-- ---------------------- 插画 ------------------ -->
	<div id="one">
		<img src="img/music2.jpg" style="margin-top:-30px;width:100%;height:200px;">
	</div>
	<!-- ---------------------- 插画 END ------------------ -->

	<!-- ------------ 歌词的介绍 ------------------------ -->
	<div id="ge" class="col-md-12" style="background-color:#D1CECE;">
		<img id="img1" src="img/Musica.jpg" class="col-md-6" style="width:50%;height:400px;">
		<div id="font1" style="background-color:#3C3C40;width:50%;height:400px;" class="col-md-6">
			<h1 style="color:white;margin-top:20%;">由于歌词表达了歌曲的宗旨和灵魂，阐述了一首歌所要表达的感情和主旨，所以即使年代久远，有的歌词也不容易忘记。</h1>
		</div>	
	</div>
	<!-- ------------ 歌词的介绍 END ------------------------ -->
	
	
	<!---------------- 写歌词的那些人-------------------- -->
	<div id="ren" class="col-md-12" style="background-color:#D1CECE;">
		 
			
		
		<img id="img2" src="img/yuedui.png" class="col-md-12" style="width:100%;height:400px;">
		   
		<div id="font2">
		     
		     <div class="vcenter" ><center>无数音乐人用歌词来激起大家的共鸣</center><br>共同疯狂，共同快乐，共同悲伤，共同安静</div>
		</div>
	</div>
	<!---------------- 写歌词的那些人 END-------------------- -->
	
	<div class="col-md-12" >
		<hr style="background-color:#161515;height:10px;">
		<center>
			<p>版权所有 &copy; 治中电科</p>
			<p>友情链接：
				<a style="color:black;" href="http://musicase.me/">musiccase</a>
				<a style="color:black;" href="http://music.163.com/">网易云音乐</a>
				<a style="color:black;" href="http://zzesxiao.leanote.com">治电小白菜博客</a>
				<a style="color:black;" href="http://klren0312-zzes5.daoapp.io/">治中电科</a>
			</p>
			
		</center>
	</div>

	
	<script src="js/translater.min.js"></script>

	<script type="text/javascript">
		

		$(function(){
			// 图片和字交换位置的动画
			$('#ge').mousemove(function(){
				$('#img1').animate({left:"680px"});
				$('#font1').animate({right:"660px"});
			})
			


			//文字隐藏		
			$('#font2').hide();
			//图片透明度降低，文字显示
			$('#ren').mouseover(function(){
				$('#img2').animate({opacity:"0.5"});
				$('#font2').show(2000);
			});

		})
	</script>
</body>
</html>